<template>
  <div id="app">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card>
          <div slot="header" class="btitle">Total sales</div>
          <div class="itemprice">${{ismount}}</div>
          <div class="heixian"></div>
          <div style="color: #b2aaaa;"><span class="btitle">Average daily sales</span>${{ismount}}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header" class="btitle">Daily sales</div>
          <div class="itemprice">{{salenum}}</div>
          <div class="heixian"></div>
          <div style="color: #b2aaaa;"><span class="btitle">Yesterday</span>{{salenum}}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header" class="btitle">Customer Repayment</div>
          <div class="itemprice">${{repayment}}</div>
          <div class="heixian"></div>
          <div style="color: #b2aaaa;"><span class="btitle">Repayment Rate</span>{{(repayment/ismount*100).toFixed(2)}}%
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header" class="btitle">Total Purchase</div>
          <div class="itemprice">{{purchasenum}}</div>
          <div class="heixian"></div>
          <div style="color: #b2aaaa;"><span class="btitle">Yesterday</span>{{purchasenum}}</div>
        </el-card>
      </el-col>
    </el-row>
    <div style="padding-top: 40px;">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card>
            <div slot="header">Sales Order Reminder</div>
            <el-table :data="tableData1">
              <el-table-column type="index" label="NO" width="60"></el-table-column>
              <el-table-column prop="ordernumber" label="Order Number"></el-table-column>
              <el-table-column prop="customername" label="Customer"></el-table-column>
              <el-table-column prop="staff" label="Sales staff" width="100"></el-table-column>
              <el-table-column prop="totalqty" label="QTY" width="60"></el-table-column>
              <el-table-column prop="totalamount" label="Amount(S$)"></el-table-column>
              <el-table-column label="Reminder Date(days)" align="center">
                <template v-slot="scope">
                  <span>{{scope.row.remindertime}}({{scope.row.days}}days)</span>
                </template>
              </el-table-column>

            </el-table>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card>
            <div slot="header">Puchase Order Reminder</div>
            <el-table :data="tableData2">
              <el-table-column type="index" label="NO" width="60"></el-table-column>
              <el-table-column prop="ordernumber" label="Order Number"></el-table-column>
              <el-table-column prop="suppliername" label="Supplier"></el-table-column>
              <el-table-column prop="staff" label="Creator" width="90"></el-table-column>
              <el-table-column prop="totalqty" label="Product Quanity" width="130"></el-table-column>
              <el-table-column prop="totalamount" label="Total Cost"></el-table-column>
              <el-table-column label="Reminder Date(days)" align="center">
                <template v-slot="scope">
                  <span>{{scope.row.remindertime}}({{scope.row.days}}days)</span>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </div>

  </div>
</template>
<script>
  import CURD from "@/mixin/CURD";
  import {
    index,
    show,
    update,
    store
  } from "@/api/saleinvoice";
  import {
    index as saleorderindex
  } from "@/api/saleorder";
  export default {
    name: "saleinvoiceadd",
    mixins: [CURD],
    components: {

    },
    data() {
      return {
        module: "saleinvoice",
        newTitle: "New saleinvoice",
        editTitle: "Edit saleinvoice",
        page: {
          total: null,
          per_page: 100,
          sizes: [10, 20, 25, 50],
          current_page: 1
        },
        ismount: 0,
        salenum: 0,
        repayment: 0,
        purchasenum: 0,
        searchForm: {},
        tableData1: [],
        tableData2: [],
      };
    },
    mounted() {

    },
    computed: {
      // totalqty() {
      //   if (this.formData.procureditem) {
      //     const totalPrice = this.formData.procureditem.reduce((total, item) => total + parseFloat(item
      //       .qty), 0);
      //     return totalPrice ? totalPrice : 0
      //   }
      // },
      // totalamount() {
      //   if (this.formData.procureditem) {
      //     const amount = this.formData.procureditem.reduce((total, item) => total + parseFloat(item.costamount), 0);
      //     return amount ? amount : 0
      //   }
      // },
    },
    async created() {
      this.fetchData1()
      this.fetchData2()
      const ressaleorderindex = await saleorderindex(
        this.page.current_page,
        this.page.per_page,
        this.searchForm
      );
      if (ressaleorderindex) {
        this.salenum = ressaleorderindex.meta.total
      }
    },
    methods: {
      handleorderadd() {
        for (var i = 0; i < this.idso.length; i++) {
          var pido = this.idso[i]
          console.log(pido, "this.pido")
          for (var iv = 0; iv < this.tableDataorder.length; iv++) {
            console.log(this.tableDataorder[iv].product_id, "this.tableDataorder[iv].product_id")
            if (this.tableDataorder[iv].product_id == pido) {
              if (this.oidlist.includes(pido)) {

              } else {
                console.log("开始插入  数据：" + pido)
                this.oidlist.push(pido)
                this.tableDataorder[iv].batchnumberlist = this.tableDataorder[iv].batchnumberlist
                this.tableDataorder[iv].name = this.tableDataorder[iv].productname
                this.tableDataorder[iv].csku = this.tableDataorder[iv].suppliesku
                this.tableDataorder[iv].id = this.tableDataorder[iv].product_id;
                this.tableDataorder[iv].uom = this.tableDataorder[iv].onhand;
                this.tableDataorder[iv].price = this.tableDataorder[iv].costprice;
                this.tindex = this.formData.procureditem.length
                this.addItem()
                this.selectadd(this.tableDataorder[iv])

              }
            }
          }
        }
        this.dialogFormVisible1 = false

      },
      async fetchData2() {
        let {
          index
        } = require(`@/api/purchaseorder`);
        //this.searchForm2.status = "approved"
        const res = await index(
          this.page.current_page,
          this.page.per_page,
          this.searchForm
        );
        if (
          res.data instanceof Object &&
          typeof this.transfromData === "function"
        ) {
          let data = this.transfromData(res.data);
          this.tableData2 = data;
        } else {
          this.tableData2 = res.data;
        }


        for (var iv = 0; iv < this.tableData2.length; iv++) {
          const remindertime = new Date(this.tableData2[iv].remindertime);
          const currentDate = new Date();
          const timeDiff = remindertime.getTime() - currentDate.getTime();
          const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
          this.tableData2[iv].days = daysDiff;
        }
        this.tableData2 = this.calculateDays(this.tableData2)
        this.purchasenum = res.meta.total

      },
      async fetchData1() {
        const res = await index(
          this.page.current_page,
          this.page.per_page,
          this.searchForm
        );
        if (
          res.data instanceof Object &&
          typeof this.transfromData === "function"
        ) {
          let data = this.transfromData(res.data);
          this.tableData1 = data;
        } else {
          this.tableData1 = res.data;
        }
        var ismount = 0
        var repayment = 0

        for (var iv = 0; iv < this.tableData1.length; iv++) {
          const remindertime = new Date(this.tableData1[iv].remindertime);
          const currentDate = new Date();
          const timeDiff = remindertime.getTime() - currentDate.getTime();
          const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
          this.tableData1[iv].days = daysDiff;
          console.log(this.tableData1[iv].remindertime, daysDiff)
          ismount = ismount + this.tableData1[iv].totalamount
          repayment = repayment + this.tableData1[iv].allapayment
        }
        this.ismount = ismount;
        this.repayment = repayment;

        this.tableData1 = this.calculateDays(this.tableData1)

      },
      calculateDays(tableData) {
        const filteredData = [];
        for (var iv = 0; iv < tableData.length; iv++) {
          const remindertime = new Date(tableData[iv].remindertime);
          const currentDate = new Date();
          const timeDiff = remindertime.getTime() - currentDate.getTime();
          const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
          if (daysDiff >= 0) {
            tableData[iv].days = daysDiff;
            filteredData.push(tableData[iv]);
          }
        }
        filteredData.sort((a, b) => a.days - b.days);
        return filteredData.slice(0, 10);
      },
      changebt(value) {
        const selectedbt = this.billingtitle.find(item => item.title === value);
        if (selectedbt) {
          this.formData.billingattention = selectedbt.attention
          this.formData.billingfax = selectedbt.fax
          this.formData.billingtel = selectedbt.tel
          this.formData.billingaddress = selectedbt.address
        }
        this.$forceUpdate()
      },
      transfromData(data) {
        let result = data.map((item) => {
          item.isEdit = false;
          return item;
        });
        return result;
      },
    }
  }
</script>
<style>
  #app {
    padding: 20px;
  }

  .btitle {
    color: #aaaaaa;
    font-weight: 600;
    margin-right: 20px;
  }

  .itemprice {
    color: #333333;
    font-size: 40px;
  }

  .heixian {
    padding-bottom: 10px;
    border-bottom: 1px solid #aaaaaa;
    margin: 20px 0;
  }
</style>